<template>
  <el-table
    :data="rolesList"
    stripe
    border
    style="width: 100%"
  >
    <el-table-column
      type="expand"
      width="48"
    >
      <template slot-scope="{row}">
        <!-- 第一层 -->
        <el-row
          v-for="(item,index) in row.children"
          :key="item.id"
          :class="['bdBottom',index ? '' : 'bdTop']"
        >
          <el-col :span="5" class="h-center">
            <el-tag
              closable
              effect="dark"
              @close="onDelete(row.id,item.id)"
            >
              {{ item.authName }}
            </el-tag>
            <i class="el-icon-caret-right" />
          </el-col>
          <el-col :span="19">
            <!-- 第二层 -->
            <el-row
              v-for="(item2,index2) in item.children"
              :key="item2.id"
              :class="['pd','bdRight',index2 ? 'bdTop' : '']"
            >
              <el-col :span="6" class="h-center">
                <el-tag
                  type="success"
                  closable
                  effect="dark"
                  @close="onDelete(row.id,item2.id)"
                >
                  {{ item2.authName }}
                </el-tag>
                <i class="el-icon-caret-right" />
              </el-col>
              <el-col :span="18">
                <!-- 第三层 -->
                <el-tag
                  v-for="item3 in item2.children"
                  :key="item3.id"
                  type="warning"
                  closable
                  effect="dark"
                  class="tag-lv3"
                  @close="onDelete(row.id,item3.id)"
                >
                  {{ item3.authName }}
                </el-tag>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </template>
    </el-table-column>
    <el-table-column
      type="index"
      label="#"
      width="47"
    />
    <el-table-column
      prop="roleName"
      label="角色名称"
    />
    <el-table-column
      prop="roleDesc"
      label="角色描述"
    />
    <el-table-column
      label="操作"
    >
      <template slot-scope="{row}">
        <action-buttons
          edit-text="编辑"
          delete-text="删除"
          distribute-text="分配权限"
          @edit="$emit('edit',row.id)"
          @delete="$emit('delete',row.id)"
          @distribute="$emit('distribute',row.id)"
        />
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { deletePermission } from '@/api/role'
import ActionButtons from '@/components/ActionButtons'
export default {
  components: { ActionButtons },
  props: {
    rolesList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
    }
  },
  created() {
  },
  methods: {
    // 点击删除
    onDelete(roleId, rightId) {
      this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await deletePermission(roleId, rightId)
        // 通过返回值更改权限数据
        this.rolesList.forEach(item => {
          if (item.id === roleId) {
            item.children = res
          }
        })
        this.$message({
          type: 'success',
          message: '删除权限成功!'
        })
      }).catch(() => {})
    }
  }
}
</script>

<style scoped lang='scss'>
.el-table{
  margin-top: 15px;
}
.el-row{
  border-left: 1px solid #efefef;
  display: flex;
  align-items: center;
}
.bdTop{
  border-top: 1px solid #efefef;
}
.bdRight{
  border-right: 1px solid #efefef;
}
.bdBottom{
  border-bottom: 1px solid #efefef;
}
.pd{
  padding: 5px 0;
}
.h-center{
  display: flex;
  justify-content: center;
  align-items: center;
}
.tag-lv3{
  margin: 5px 10px 5px 0;
}
</style>
